<template>
  <div id='content'>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>绩效管理</el-breadcrumb-item>
      <el-breadcrumb-item>绩效设置</el-breadcrumb-item>
    </el-breadcrumb>
    <div id='form'>
      <el-form ref="form" :model="form" label-width="80px">
        <div class='myInput'>

          <el-form-item label="考核周期:">
            <el-input v-model="form.nper"></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="form.post_state" placeholder="请选择">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
          <div id="operation">
            <el-row>
              <el-button type="primary" @click='onSerch'>查询</el-button>
              <el-button type="primary" @click="onAdd">新增</el-button>
              <el-button @click="onResize">重置</el-button>
            </el-row>
          </div>
        </div>

        <el-divider></el-divider>

        <div id='table'>
          <el-table :data="showPage" stripe style="width: 100%">
            <el-table-column prop="nper" label="考核周期" width="180">
            </el-table-column>
            <el-table-column prop="department_name" label="使用部门" width="180">
            </el-table-column>
            <el-table-column prop="audit_time" label="绩效审核时间">
            </el-table-column>
            <el-table-column prop="post_state" label="状态">
            </el-table-column>
            <el-table-column prop="int_ime" label="发起时间">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="openEdit(scope.row)" type="warning" size="small">编辑</el-button>
                <el-button type="danger" size="small" @click='handleDel(scope.row)'>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" id='page'>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="count" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
        <!-- 新增模态框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @opened="addShow" @close="del" :before-close="handleClose">
          <el-form :model="addForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="考核周期" prop="name">
              <el-input v-model="addForm.nper"></el-input>
            </el-form-item>
            <el-form-item label="流水号" prop="name">
              <el-input v-model="addForm.num" disabled></el-input>
            </el-form-item>
            <el-form-item label="考核人工号">
              <el-select v-model="addForm.reviewer" placeholder="请选择">
                <el-option label="200001" value="200001"></el-option>
                <el-option label="200002" value="200002"></el-option>
                <el-option label="200003" value="200003"></el-option>
                <el-option label="200004" value="200004"></el-option>
                <el-option label="200005" value="200005"></el-option>
                <el-option label="200006" value="200006"></el-option>
                <el-option label="200007" value="200007"></el-option>
                <el-option label="200008" value="200008"></el-option>
                <el-option label="200009" value="200009"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="绩效发起时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="请选择发起时间" v-model="addForm.int_ime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio-group v-model="addForm.state">
                <el-radio label="启用"></el-radio>
                <el-radio label="禁用"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addOk">提交</el-button>
          </span>
        </el-dialog>
        <!-- 编辑模态框 -->
        <el-dialog title="提示" :visible.sync="editVisible" width="30%" :before-close="handleClose">
          <el-form :model="editForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="考核周期">
              <el-input v-model="editForm.nper" disabled></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="editForm.department_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="绩效考核时间">
              <el-input v-model="editForm.audit_time" disabled></el-input>
            </el-form-item>
            <el-form-item label="发起时间">
              <el-input v-model="editForm.int_ime" disabled></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio-group v-model="editForm.state">
                <el-radio label="启用"></el-radio>
                <el-radio label="禁用"></el-radio>
              </el-radio-group>
            </el-form-item>

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="editOk">提交</el-button>
          </span>
        </el-dialog>
      </el-form>

    </div>
    <!-- <div id="div1" ref="div1">
      <p>欢迎使用 wangEditor 编辑器</p>
    </div> -->
  </div>

</template>
<script>
export default {
  data() {

    return {
      editorContent: '',
      tableData: [],
      total: 0,
      count: 5,
      page: 1,
      form: {
        nper: '',
        post_state: '',
      },
      currentPage4: 1,
      editVisible: false,
      dialogVisible: false,
      addForm: {
        nper: '',
        reviewer: '',
        int_ime: '',
        state: '',
        num: '',
      },
      value1: '',
      editForm: {
        nper: '',
        department_name: '',
        audit_time: '',
        int_ime: '',
        state: '',
        post_id: 1,
      }
    }
  },
  methods: {
    addShow() {

    },
    del() {

    },


    onSubmit() {
      console.log('submit!');
    },
    handleCurrentChange(n) {
      this.page = n
    },
    handleSizeChange(n) {
      this.count = n
    },
    handleClose() {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //this.addVisible = false;
          // console.log(action, instance)
          if (action == 'cancel') {
            this.dialogVisible = true;
            this.editVisible = true;
          } else if (action == 'confirm') {
            this.dialogVisible = false;
            this.editVisible = false;
          }
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //渲染获取数据
    getSetnews() {
      this.$axios({
        url: '/achievements/getSetnews',
      }).then((res) => {
        let arrdata = [];
        res.data.data.forEach((v, i) => {
          // console.log(v.audit_time);
          v.audit_time = v.audit_time == null ? "审核未完成" : v.audit_time
          arrdata.push(v)
        })
        console.log(res.data.data);
        this.tableData = arrdata
        this.total = arrdata.length
        this.addForm.num = 'JX202102240' + ((Number((this.tableData[this.total - 1].num).slice(11, 13))) + 1);
      })
    },
    // 查询
    onSerch() {
      this.page = 1,
        this.$axios({
          url: "/achievements/setpostSerch",
          method: 'post',
          data: {
            data: this.form
          }
        }).then((res) => {
          console.log(res.data.data);
          let arrdata = [];
          res.data.data.forEach((v, i) => {
            v.audit_time = v.audit_time == null ? "审核未完成" : v.audit_time
            arrdata.push(v)
          })
          this.tableData = arrdata
          this.total = arrdata.length
        })
    },
    // 重置
    onResize() {
      this.form.nper = '';
      this.form.post_state = '';
      this.getSetnews()
      this.count = 5;
      this.page = 1;

    },
    // 编辑
    openEdit(data) {
      console.log(data);
      this.editVisible = true;
      this.editForm.nper = data.nper;
      this.editForm.department_name = data.department_name;
      this.editForm.audit_time = data.audit_time;
      this.editForm.int_ime = data.int_ime;
      this.editForm.state = data.post_state;
      this.editForm.post_id = data.post_id
    },
    editOk() {
      this.editVisible = false;
      this.$axios({
        url: '/achievements/setpostEdit',
        method: 'post',
        data: {
          data: {
            state: this.editForm.state,
            id: this.editForm.post_id,
          }
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          })
        } this.onResize()
      })
    },
    // 删除
    handleDel(data) {
      // console.log(data.per_id);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/achievements/setPostDel',
          method: 'post',
          data: {
            id: data.per_id
          }
        }).then((res) => {
          if (res.data.code == 200) {
            this.tableData = this.tableData.filter((v) => {
              if (v.per_id != data.per_id) {
                return v
              }
            })
            this.total = this.tableData.length
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 新增
    onAdd() {
      this.dialogVisible = true;
    },
    addOk() {
      this.dialogVisible = false;
      // console.log(this.addForm);
      this.$axios({
        url: '/achievements/setPostAdd',
        method: 'post',
        data: {
          data: this.addForm
        }
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success"
          })
        }
      })
    }

  },

  mounted() {
    this.getSetnews()
  },
  computed: {
    showPage() {
      return this.tableData.slice((this.page - 1) * this.count, this.page * this.count)
    }
  },
  // watch: {
  //   addForm()
  // }
}
</script>

<style scoped>
.text {
  border: 1px solid #ccc;
  height: 40px;
}
#form {
  background-color: white;
  margin-top: 30px;
}
.el-input {
  width: 300px;
  margin-right: 20px;
}
.myInput {
  display: flex;
  padding-top: 20px;
}
#page {
  text-align: right;
  margin-top: 30px;
}
.demonstration {
  font-size: 14px;
  color: #606266;
  margin-left: 30px;
  margin-right: 10px;
}
hr {
  margin: 30px 0;
  border: 1px solid #f2f2f2;
}
#operation {
  text-align: right;
  margin-right: 20px;
}
#details span:first-child {
  color: red;
  margin-left: 50px;
}
#operation {
  flex: 1;
}
</style>